<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>拼团</title>
    <link rel="stylesheet" href="../common/css/normalize.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/css/iconfont.css">
    <link rel="stylesheet" href="../common/css/animate.css">
    <link rel="stylesheet" href="css/teamPk.min.css">
</head>
<body>
    <div id="teamPk">
	    <div v-show="pageHome">
			<div class="banner">
				<img src="img/banner.png" alt="">
			</div>
		    <div class="btn-form">
				<div class="flex-between">
					<img class="btn-index" src="img/btn_blue.png" alt="" @click="getResult()">
					<img class="btn-index" src="img/btn_red.png" alt="" @click="getResult()">
				</div>
		    </div>
		    <div class="begin text-center">
			    <div class="fz15 chance text-center mt20" >
				    (你还能发起<span>{{count}}</span>次拼团)
	            </div>
		    </div>
	        <div class="footer">
	            <a href="../common/prize.html">我的奖品</a>
	            <span>|</span>
	            <a href="../common/rule.html">活动规则</a>
	        </div>
	    </div>
	    <div class="fight flex-between" v-show="pageFight">
		    <transition name="bounceInDown">
				<div class="team-red animated" :class="{bounceInLeft:showLeft}" v-show="pageFight">
					<img src="img/red_team.png" alt="">
				</div>
		    </transition>
		    <transition >
			    <div class="team-blue animated" :class="{bounceInRight:showRight}" v-show="pageFight">
					<img src="img/blue_team.png" alt="">
				</div>
		    </transition>
	    </div>
        <div class="toast" v-show="isShow">
            <div class="bg"></div>
            <div class="con text-center">
                <div class="win" v-show="win" >
                    <div class="prize prize-step2">
	                    <img class="prize-img" src="../common/img/prize.jpg" alt="" >
	                    <p class="prize-name">
		                    有效期：2018/03/25-2018/04/25
		                    <br>
							线下门店兑换(当面核销有效)
		                    <br>
							兑换地址：高新区XXXXX
	                    </p>
	                    <a href="../common/getPrize.html" class="btn btn-red btn-pink" >兑奖</a>
	                    <div class="close">
	                        <i class="iconfont icon-close" @click="close()"></i>
	                    </div>
                     </div>
                </div>
	            <div class="win" v-show="!win" >
                    <div class="prize prize-lose">
	                    <a class="btn btn-pink btn-fail" @click="close()">再选一次</a>
                     </div>
                </div>

            </div>
        </div>

    </div>

	<script src="../common/js/common.js"></script>
	<script src="../common/lib/vue.min.js"></script>

	<script>
		const teamPk = new Vue({
			el: '#teamPk',
			data: {
                pageHome:!false,
                pageFight:!true,
                isShow:false,  // 显示toast
                win:false,   // 默认中奖, 没中奖就显示没中奖的div
                lose:false,
                count:3,
				showLeft:false,  //关闭首页显示, 添加左边动画效果
				showRight:false,  //关闭首页显示, 添加右边动画效果
			},
			methods:{
                getResult:function () {  //根据接口设置是否抽奖,   中奖win设置为true, 否则显示失败信息
                    const that = this
                    if(that.count <= 0 ) { return}
                    that.count--

//                     that.win = !that.win   // 中奖设置win为true , 根据接口设置
//                     that.win = true  // 一直中奖界面测试
                     that.pageHome = !that.pageHome  //关闭首页
                     that.pageFight = !that.pageFight  //显示战斗页

	                setTimeout(function () {
		                that.showLeft = !that.showLeft  //显示左边动画效果
		                that.showRight = !that.showRight //显示右边动画效果

		                //显示中奖信息, 如果win为true, 显示中奖信息, 否则显示失败信息
		                if(that.win){
                            that.yes()
		                }else{
                            that.again()
		                }
                    },1000)

                },
                yes: function () {  //中奖
                    const that = this
                    setTimeout(function () {
                        that.isShow = !that.isShow  //显示toast
                    },1500)
                },
                again: function () {  //没中奖
                    const that = this
                    setTimeout(function () {
                        that.isShow = !that.isShow  //显示toast
                    },1500)
                },
                close: function () {
                    const that = this
                    that.isShow = !that.isShow
                    that.pageHome = !that.pageHome
                    that.pageFight = !that.pageFight
                    that.showLeft = !that.showLeft
                    that.showRight = !that.showRight
                }
			}
		})
	</script>
</body>
</html>